<template>
	<view class="box">
		<view class="time">
			<view class="nodeIcon iconfont" :class="'icon-'+nodeIcon[nodeClass]"/>
			<view class="second">
				0.0''	
			</view>
			<view class="stepLink" @click="link(nodeLinkStep)">
				Step{{nodeLinkStep}}
			</view>
		</view>
		<view class="content" @click="eidt(index)">
			<view class="index">Node  {{index+1}}</view>
			<view class="nodeName">{{nodeName[nodeClass]}}</view>
			<view class="parameter LBeep" v-if="nodeClass==0">
				{{nodeLBeep[nodeParameter]}}
			</view>
			<view class="parameter delay" v-if="nodeClass==1">
				{{nodeParameter}}秒
			</view>
			<view class="parameter equipment" v-if="nodeClass==2">
				<view class="custom">{{nodeParameter.mac}}</view>
				<view class="mac">{{nodeParameter.mac}}</view>
			</view>
			<view class="parameter loop" v-if="nodeClass==3">
				从Node {{nodeParameter}}开始
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { ref } from 'vue';
import { plan } from '@/work/nodeGroup.js';
const nodeIcon = ['play','clock','droplet','refresh-cw','power']
const nodeName = ['开始','等待','执行设备','循环','结束']
const nodeLBeep = ["静音","仅首台设备长鸣提醒","所有参与设备长鸣提醒"]

const props  = defineProps({
	index:{
		type: Number,
		default: 0
	}
})
const emit = defineEmits(["eidt","link"])

function eidt(a){
	emit('eidt',a)
}
function link(a){
	emit('link',a)
}
const nodeParameter=ref(plan.currentPlan.nodeGroup[props.index].parameter)
const nodeClass =ref(plan.currentPlan.nodeGroup[props.index].class)
const nodeLinkStep =ref(plan.currentPlan.nodeGroup[props.index].linkStep)

console.log(nodeParameter.value)


</script>

<style scoped>
.content{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--p-color);
	border-top: 20px solid var(--p-color) ;
	border-radius: 10px;
	margin: 5px 10rpx;
	padding: 10px;
	position: relative;
}
.parameter{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 0 3px;
	margin: 0 15px;
	border-bottom: 1px solid var(--p-color);
	font-size: 0.8em;
}

.time{
	width: 20%;
	margin:0 15px;
	padding: 2px 10px;
	border-right: 2px solid var(--p-color) ;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.second{
	display: flex;
	justify-content: center;
	margin:0 0 5px 0;
}
.equipment{
	display: flex;
	flex-direction: column;
}
.mac{
	font-size: 0.7em;
}
.stepLink{
	background: var(--p-color);
	font-size: 0.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:  6px;
	border-radius: 99px;
	color: #FFFFFF;
}
.nodeIcon{
	position: absolute;
	top: 0;
	right: -13px;
	color: var(--p-color);
	background:#FFFFFF;
	padding: 4px;
	border-radius: 999px;
	font: 1.2em;
}
.box{
	display: flex;
	width: 95%;
}
.nodeName{
	width: 2em;
}

.index{
	color: #ffffff;
	position: absolute;
	top: -19px;
	font-size: 0.8em;
	
}
</style>